<template>
    <!-- 进度情况组件plan -->
    <div class="s-plans">
        <p class="s-jin">进度</p>
        <div class="progress" v-if="plant">
            <Progress v-if="false">
                <Icon type="checkmark-circled"></Icon>
                <span>已完结</span>
            </Progress>
            <Progress v-if="plant.EVENT_STATUS === 0" :percent="plant.COUNT">
                <span style="color: #ed3f14">{{plant.EVENT_STATUS_NAME}}&nbsp;&nbsp;{{plant.COUNT}}%</span>
            </Progress>
            <Progress v-if="plant.EVENT_STATUS === 1" :percent="plant.COUNT">
                <span style="color: #0093dd">{{plant.EVENT_STATUS_NAME}}&nbsp;&nbsp;{{plant.COUNT}}%</span>
            </Progress>
            <Progress v-if="plant.EVENT_STATUS === 2" class="pingjia" :percent="plant.COUNT">
                <span style="color: #ff9900">{{plant.EVENT_STATUS_NAME}}</span>
            </Progress>
            <Progress v-if="plant.EVENT_STATUS === 3" :percent="plant.COUNT">
                <span>{{plant.EVENT_STATUS_NAME}}</span>
            </Progress>
        </div>
    </div>
</template>

<script>
export default {
    props: ['plant']
}
</script>

<style lang="less">
.s-plans{
    padding-left:20px;
    background-color:white;
    .s-jin{
        padding-top:10px;
    }
    .progress{
    padding: 10px 0;
    .ivu-progress-outer{
            width:95% !important;
        }
    .pingjia{
        .ivu-progress-bg{
            background-color: #ff9900!important;
        }
        .ivu-progress-success .ivu-progress-bg {
            background-color:#ff9900!important;
        }
    }
    }
}
</style>
